<template>
  <div>
    <el-form-item>
      <el-collapse class="collapseStyle" v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1" class="collapseStyleParent">
          <template slot="title">
            <div class="collapseTitle">
              <span>请求参数</span>
            </div>
          </template>
          <div class="collapseContent">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
              <el-tab-pane name="1">
                <span slot="label">请求头部 <i class="el-icon-info"></i></span>
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%;margin-top: 15px;">
                  <el-table-column width="50">
                    <template slot-scope="scope">
                      <span v-if="scope.row.addRow">添加</span>
                      <i v-else class="el-icon-sort"></i>
                    </template>
                  </el-table-column>
                  <el-table-column prop="headerName" label="标签" width="380">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.headerName" :class="{styleInput: !scope.row.addRow}" @input="val => tableRowDataChange(val, scope.row, 'tableData')" size="small" placeholder="头部标签"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="required" label="必填" width="80">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-checkbox v-model="scope.row.required"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="headerValue" label="示例">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.headerValue" class="styleInput" size="small" placeholder="头部内容"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="说明">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.remarks" class="styleInput" size="small" placeholder="参数说明"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多操作" width="160">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <!--<el-button type="text">更多设置</el-button>-->
                      <el-button type="text" @click="removeRow(scope.$index, 'tableData')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="2">
                <span slot="label">请求体 <i class="el-icon-info"></i></span>
                <div class="requsetBodyContent">
                  <div class="requsetBodyHeader">
                    <el-radio-group v-model="requestorRadio" @change="requestRadioBody">
                      <el-radio label="FormData">Form-data</el-radio>
                      <el-radio label="JSON">JSON</el-radio>
                      <el-radio label="XML">XML</el-radio>
                      <el-radio label="Raw">Raw</el-radio>
                      <el-radio label="Binary">Binary</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="jsonType" v-if="requestorRadio === 'JSON'">
                    <span style="display: block;font-size: 12px;color: rgb(153,153,153);margin: 5px 0 4px;">JSON 根类型 <i class="el-icon-info"></i> : </span>
                    <el-select v-model="optionsJsonVal" @change="requestSelectBody" size="small" placeholder="请选择">
                      <el-option
                        v-for="item in optionsJson"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <div>
                    <div style="margin-top: 8px;">
                      <indexTable v-show="requestorRadio === 'FormData'" ref="indexTable1" title="参数名" :list="requestBodyTableFormData" :tableBtn="btnAll1" :dataStructuretype="dataStructuretype"  @insertStructure="insertStructure" @StructureID="StructureID" @handlerExpand="handlerExpand" @handelClickRowEdit="handelClickRowEdit"></indexTable>
                    </div>
                    <div style="margin-top: 8px;">
                      <indexTable v-show="requestorRadio === 'JSON'" ref="indexTable2" title="参数名" :list="requestBodyTableJson" :tableBtn="btnAll2" :dataStructuretype="dataStructuretype"  @insertStructure="insertStructure" @StructureID="StructureID" @handlerExpand="handlerExpand" @handelClickRowEdit="handelClickRowEdit"></indexTable>
                    </div>
                    <div style="margin-top: 8px;">
                      <indexTable v-show="requestorRadio === 'XML'" ref="indexTable3" title="参数名" :list="requestBodyTableXML" :tableBtn="btnAll3"  :dataStructuretype="dataStructuretype"  @insertStructure="insertStructure" @StructureID="StructureID" @handlerExpand="handlerExpand" @handelClickRowEdit="handelClickRowEdit"></indexTable>
                    </div>
                    <div class="rawTextArea" v-if="requestorRadio === 'Raw'">
                      <codeMirror ref="rawTextareaDom" :refName="refName" @reqParamTypeCode="reqParamTypeCode" :value="textAreaValue"></codeMirror>
                    </div>
                    <div v-if="requestorRadio === 'Binary'" style="margin-top: 14px;">
                      <el-input
                        type="textarea"
                        :rows="6"
                        resize="none"
                        placeholder="参数描述"
                        v-model="textareaBinary">
                      </el-input>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane name="3">
                <span slot="label">Query参数 <i class="el-icon-info"></i></span>
                <el-table
                  :data="requestBodyTableQuery"
                  border
                  style="width: 100%;margin-top: 15px;">
                  <el-table-column width="50">
                    <template slot-scope="scope">
                      <span v-if="scope.row.addRow">添加</span>
                      <i v-else class="el-icon-sort"></i>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="名称" width="200">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.name" :class="{styleInput: !scope.row.addRow}" @input="val => tableRowDataChange(val, scope.row, 'requestBodyTableQuery')" size="small" placeholder="参数名"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="type" label="类型">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-select class="styleInput" size="small" v-model="scope.row.type" placeholder="请选择">
                        <el-option
                          v-for="item in optionsType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="必填" width="80">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-checkbox v-model="scope.row.required"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="说明">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.remarks" class="styleInput" size="small" placeholder="参数说明"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="verification" label="限制">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.verification" class="styleInput" size="small" placeholder="参数限制"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="demo" label="示例">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.demo" class="styleInput" size="small" placeholder="参数示例"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多操作" width="260">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <!--<el-button type="text">更多设置</el-button>-->
                      <!--<el-button type="text">插入</el-button>-->
                      <el-button type="text" @click="removeRow(scope.$index, 'requestBodyTableQuery')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="4">
                <span slot="label">REST参数 <i class="el-icon-info"></i></span>
                <el-table
                  :data="requestBodyTableREST"
                  border
                  style="width: 100%;margin-top: 15px;">
                  <el-table-column width="50">
                    <template slot-scope="scope">
                      <span v-if="scope.row.addRow">添加</span>
                      <i v-else class="el-icon-sort"></i>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="名称" width="200">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.name" :class="{styleInput: !scope.row.addRow}" @input="val => tableRowDataChange(val, scope.row, 'requestBodyTableREST')" size="small" placeholder="参数名"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="address" label="类型">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-select class="styleInput" size="small" v-model="scope.row.type" placeholder="请选择">
                        <el-option
                          v-for="item in optionsType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column prop="required" label="必填" width="80">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-checkbox v-model="scope.row.required"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="remarks" label="说明">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.remarks" class="styleInput" size="small" placeholder="参数说明"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="verification" label="限制">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.verification" class="styleInput" size="small" placeholder="参数限制"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="demo" label="示例">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <el-input v-model="scope.row.demo" class="styleInput" size="small" placeholder="参数示例"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多操作" width="80">
                    <template slot-scope="scope" v-if="!scope.row.addRow">
                      <!--<el-button type="text">更多设置</el-button>-->
                      <!--<el-button type="text">插入</el-button>-->
                      <el-button type="text" @click="removeRow(scope.$index, 'requestBodyTableREST')">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane name="5">
                <span slot="label">权限校验 <i class="el-icon-info"></i></span>
                <div class="authorizationType">
                  <span style="font-weight: 700;font-size: 14px;display: inline-block;margin-right: 20px;">Authorization Type</span>
                  <el-select size="small" v-model="AuthorityVerification" placeholder="请选择" @change="selectChangeAuthor">
                    <el-option
                      v-for="item in optionsAuthorization"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <div class="selectChangeContent" v-if="selectVal !== '0'">
                    <div class="authorizationTypeItem" v-if="selectVal === '1'">
                      <div class="authInputBox">
                        <span style="display: inline-block;font-weight: 700;width: 100px;text-align: left;">用户名</span>
                        <el-input size="small" v-model="basicAuth.userNameAuthor" placeholder="请输入用户名"></el-input>
                      </div>
                      <div class="authInputBox">
                        <span style="display: inline-block;font-weight: 700;width: 100px;text-align: left;">密码</span>
                        <el-input size="small" placeholder="请输入密码" v-model="basicAuth.passwordAuthor" show-password></el-input>
                      </div>
                    </div>
                    <div class="authorizationTypeItem" v-if="selectVal === '2'">
                      <div class="jwtHeader jwtBlock">
                        <span style="display: block;margin-top: 20px;">Header</span>
                        <el-table
                          :data="jewData.jwtHeaderData"
                          border
                          style="width: 100%;margin-top: 15px;">
                          <el-table-column prop="typ" label="typ"></el-table-column>
                          <el-table-column prop="alg" label="alg">
                            <template slot-scope="scope">
                              <el-select style="width: 100%;" size="small" v-model="scope.row.alg" placeholder="请选择">
                                <el-option
                                  v-for="item in optionsJwtHeader"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="jwtPayload jwtBlock">
                        <span style="display: block;margin-top: 20px;">Payload</span>
                        <el-table
                          :data="jewData.jwtPayloadData"
                          border
                          style="width: 100%;margin-top: 15px;">
                          <el-table-column prop="data" label="Data">
                            <template slot-scope="scope">
                              <el-input
                                style="width: 100%;"
                                type="textarea"
                                :rows="5"
                                placeholder="请输入内容"
                                v-model="scope.row.data">
                              </el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="jwtSignature jwtBlock">
                        <span style="display: block;margin-top: 20px;">Signature</span>
                        <el-table
                          :data="jewData.jwtSignatureData"
                          border
                          style="width: 100%;margin-top: 15px;">
                          <el-table-column prop="secretSalt" label="Secret Salt">
                            <template slot-scope="scope">
                              <el-input
                                style="width: 100%;"
                                type="textarea"
                                :rows="5"
                                placeholder="请输入内容"
                                v-model="scope.row.secretSalt">
                              </el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="jwtTokenPosition jwtBlock">
                        <span style="display: block;margin-top: 20px;">JWT Token Position</span>
                        <el-table
                          :data="jewData.jwtTokenPositionData"
                          border
                          style="width: 100%;margin-top: 15px;">
                          <el-table-column prop="position" label="Position">
                            <template slot-scope="scope">
                              <el-select size="small" style="width: 100%;" v-model="scope.row.position" placeholder="请选择">
                                <el-option
                                  v-for="item in optionsPosition"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value">
                                </el-option>
                              </el-select>
                            </template>
                          </el-table-column>
                          <el-table-column prop="tokenName" label="Token Name">
                            <template slot-scope="scope">
                              <el-input size="small" style="width: 100%;" v-model="scope.row.tokenName"></el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                      <div class="jwtBlocl jwtBearerToken">
                        <el-checkbox v-model="jewData.checkedJwtBearerToken">使用 Bearer Token，在 token 前加入 Bearer 前缀</el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form-item>
    <el-dialog
      custom-class="dhcWebLayer"
      top="0"
      v-if="dialogConfig"
      :close-on-click-modal="false"
      title="设置参数"
      :visible.sync="dialogConfig"
      width="40%">
      <el-form ref="form" label-position="top" :model="formData" label-width="100px">
        <el-form-item label="参数名">
          <el-input size="small" v-model="formData.parameterName"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select class="styleInput" size="small" v-model="formData.type" placeholder="请选择">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="必填">
          <el-checkbox size="small" v-model="formData.required"></el-checkbox>
        </el-form-item>
        <el-form-item label="说明">
          <el-input size="small" v-model="formData.explain"></el-input>
        </el-form-item>
        <el-form-item label="限制">
          <el-input size="small" v-model="formData.limit"></el-input>
        </el-form-item>
        <el-form-item label="示例">
          <el-input size="small" v-model="formData.example"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button size="small" @click="dialogConfig = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveDialogConfig">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      custom-class="dhcWebLayer"
      top="0"
      v-if="dialogConfigXML"
      :close-on-click-modal="false"
      title="设置参数"
      :visible.sync="dialogConfigXML"
      width="40%">
      <el-form ref="form" label-position="top" :model="formDataXML" label-width="100px">
        <el-form-item label="参数名">
          <el-input size="small" v-model="formDataXML.parameterName"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select class="styleInput" size="small" v-model="formDataXML.type" placeholder="请选择">
            <el-option
              v-for="item in optionsType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="必填">
          <el-checkbox size="small" v-model="formDataXML.required"></el-checkbox>
        </el-form-item>
        <el-form-item label="说明">
          <el-input size="small" v-model="formDataXML.explain"></el-input>
        </el-form-item>
        <el-form-item label="限制">
          <el-input size="small" v-model="formDataXML.limit"></el-input>
        </el-form-item>
        <el-form-item label="示例">
          <el-input size="small" v-model="formDataXML.example"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button size="small" @click="dialogConfigXML = false">取 消</el-button>
        <el-button size="small" type="primary" @click="saveDialogConfigXML">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-if="dialogVisibleseeView"
      custom-class="dhcWebLayer"
      top="0"
      :close-on-click-modal="false"
      title="引用数据结构"
      :visible.sync="dialogVisibleseeView"
      width="30%">
      <el-table
        :data="datatableData"
        size="small"
        stripe
        class="elementTable"
        ref="multipleTable"
        @select-all="onSelectAll"
        @selection-change="selectItem"
        @row-click="onSelectOp"
        @cell-mouse-enter="hovercell"
        header-cell-class-name="elementTableHeader"
        cell-class-name="elementTableBody"
        highlight-current-row>
        <!--<el-table-column label="" width="65">-->
          <!--<template slot-scope="scope" >-->
            <!--<el-radio class="radio" v-model="templateSelection" :label="scope.$index">&nbsp;</el-radio>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" type="selection" :selectable="seletiontable" width="55"></el-table-column>
        <el-table-column prop="name" align="center" label="数据结构名称">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
            <!--<div class="popover">-->
            <!--<el-popover trigger="hover" placement="top" v-if="datahover">-->
              <!--<p style="background-color: #000;color: #fff; line-height: initial;margin-left: 10px" >当前参数类型不支持引用该数据结构</p>-->
              <!--<div slot="reference" class="name-wrapper">-->
                <!--<span>{{scope.row.name}}</span>-->
              <!--</div>-->
            <!--</el-popover>-->
              <!--<el-popover trigger="hover" placement="top" v-else>-->
                <!--<div slot="reference" class="name-wrapper">-->
                  <!--<span>{{scope.row.name}}</span>-->
                <!--</div>-->
              <!--</el-popover>-->
            <!--</div>-->
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="描述" ></el-table-column>
        <el-table-column prop="type" label="类型" width="200"></el-table-column>
      </el-table>
      <div style="margin-top: 16px;text-align: right;">
        <el-button size="small" type="primary" @click="datahoversave">确定</el-button>
        <el-button size="small" @click="dialogVisibleseeView = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import codeMirror from '@/components/codeMirror'
  import { getdatastructureList, Editdatastructure } from '@/api/apiModel/api.js'
  import indexTable from '@/components/dhcTable/indexTable'

  export default {
    name: 'requestParameter',
    props: ['form'],
    components: {
      codeMirror,
      indexTable
    },
    data() {
      return {
        charsReq: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        dataStructuretype: '',
        btnAll: {
          insert: true,
          addSubfield: true,
          insertDataStructure: true,
          delete: true
        },
        tableData: [
          {
            type: 0, // 类型（0请求head，1返回head）
            headerName: '', // 标签
            required: true, // 必填
            headerValue: '', // 示例
            remarks: '', // 说明
            addRow: true
          }
        ],
        btnAll1: {
          insert: true,
          addSubfield: false,
          insertDataStructure: true,
          delete: true
        },
        requestBodyTableFormData: [
          {
            id: '',
            parentId: null,
            parameterName: '',
            type: '',
            required: true,
            example: '',
            explain: '',
            limit: '',
            children: []
          }
        ],
        btnAll2: {
          insert: true,
          addSubfield: true,
          insertDataStructure: true,
          delete: true
        },
        requestBodyTableJson: [
          {
            id: '',
            parentId: null,
            parameterName: '',
            type: '',
            required: true,
            example: '',
            explain: '',
            limit: '',
            children: []
          }
        ],
        btnAll3: {
          insert: false,
          addSubfield: true,
          insertDataStructure: true,
          delete: false
        },
        requestBodyTableXML: [
          {
            id: '',
            parentId: null,
            parameterName: '',
            type: '',
            required: true,
            example: '',
            explain: '',
            limit: '',
            children: []
          }
        ],
        // ===================可以新建子字段 xml begin=======================
        aaa: false,
        dialogVisibleseeView: false,
        datatableData: [],
        datatype: '',
        datahover: false,
        selectlist: [],
        datastructure: [], // 引用数据结构子数组
        datastruct: [], // 引用数据结构列表数据
        templateSelection: '',
        dataStructureIds: [], // 数据结构ID
        datastructureList: {
          'condition': [
          ],
          'sort': [
            {
              'direction': 'DESC',
              'property': 'ctime'
            }
          ],
          'fields': []
        },
        editRowIdXML: '',
        addRowIdXML: '',
        childrenIdXML: '',
        childrenParentIdXML: '',
        formDataXML: {
          parameterName: '',
          type: '',
          required: true,
          explain: '',
          limit: '',
          example: ''
        },
        dialogConfigXML: false,
        columnsXML: [
          {
            label: '参数名',
            prop: 'parameterName',
            width: '300',
            align: 'left',
            headerAlign: 'center',
            type: 'template',
            template: 'parameterName'
          },
          {
            label: '类型',
            prop: 'type',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'type'
          },
          {
            label: '必填',
            prop: 'required',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'required'
          },
          {
            label: '说明',
            prop: 'explain',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'explain'
          },
          {
            label: '限制',
            prop: 'limit',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'limit'
          },
          {
            label: '示例',
            prop: 'example',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'example'
          },
          {
            label: '更多操作',
            align: 'center',
            width: '300',
            headerAlign: 'center',
            type: 'template',
            template: 'empower'
          }
        ],
        optionsTypeXML: [
          {
            value: 'string',
            label: '[string]'
          }, {
            value: 'array',
            label: '[array]'
          }, {
            value: 'object',
            label: '[object]'
          }, {
            value: 'int',
            label: '[int]'
          }
        ],
        parentIdDataXML: '',
        charsXML: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        // ===================可以新建子字段 xml end=========================
        // ===================可以新建子字段 json begin=======================
        editRowId: '',
        addRowId: '',
        childrenId: '',
        childrenParentId: '',
        formData: {
          parameterName: '',
          type: '',
          required: true,
          explain: '',
          limit: '',
          example: ''
        },
        dialogConfig: false,
        columns: [
          {
            label: '参数名',
            prop: 'parameterName',
            width: '300',
            align: 'left',
            headerAlign: 'center',
            type: 'template',
            template: 'parameterName'
          },
          {
            label: '类型',
            prop: 'type',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'type'
          },
          {
            label: '必填',
            prop: 'required',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'required'
          },
          {
            label: '说明',
            prop: 'explain',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'explain'
          },
          {
            label: '限制',
            prop: 'limit',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'limit'
          },
          {
            label: '示例',
            prop: 'example',
            align: 'center',
            headerAlign: 'center',
            type: 'template',
            template: 'example'
          },
          {
            label: '更多操作',
            align: 'center',
            width: '300',
            headerAlign: 'center',
            type: 'template',
            template: 'empower'
          }
        ],
        optionsType: [
          {
            value: 'string',
            label: '[string]'
          }, {
            value: 'array',
            label: '[array]'
          }, {
            value: 'object',
            label: '[object]'
          }, {
            value: 'int',
            label: '[int]'
          }
        ],
        parentIdData: '',
        chars: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
        // ===================可以新建子字段 json end=========================
        refName: 'rawTextarea',
        refNamePreteratment: 'preteratmentTextarea',
        textAreaValuePreteratment: 'qwe',
        textAreaValue: '',
        // ---------------------
        showCollapse: true,
        responsePreteratmentBodyLeftData: [
          {
            name: 'API信息',
            items: [
              {
                label: '请求头部（headers）',
                value: 'headers[""]'
              },
              {
                label: '请求参数（params）',
                value: 'params[""]'
              },
              {
                label: '源数据（raw）',
                value: 'raw'
              },
              {
                label: 'Query 请求参数（query）',
                value: 'query[""]'
              },
              {
                label: '返回头部 (responseHeaders)',
                value: 'responseHeaders[""]'
              },
              {
                label: '返回值 (response)',
                value: 'response[""]'
              }
            ]
          },
          {
            name: '项目环境',
            items: [
              {
                label: 'Host 地址前缀（env.baseUrl）',
                value: 'env.baseUrl'
              },
              {
                label: '额外请求头部（env.headers）',
                value: 'env.headers[""]'
              },
              {
                label: '额外表单请求参数（env.extraParams）',
                value: 'env.extraParams[""]'
              },
              {
                label: '额外 Query 请求参数（env.querys）',
                value: 'env.querys[""]'
              },
              {
                label: '全局变量（env.globalParams）',
                value: 'env.globalParams[""]'
              }
            ]
          },
          {
            name: '公共资源',
            items: [
              {
                label: '公共资源',
                name: '插入自定义通用函数'
              }
            ]
          },
          {
            name: '加密 / 解密',
            items: [
              {
                label: 'MD5',
                value: 'eo.md5(data)'
              },
              {
                label: 'SHA1 加密',
                value: 'eo.sha1(data)'
              },
              {
                label: 'SHA256 加密',
                value: 'eo.sha256(data)'
              },
              {
                label: 'RSA-SHA1 签名',
                value: 'eo.rsaSHA1(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA-SHA256 签名',
                value: 'eo.rsaSHA256(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA 公钥加密',
                value: 'eo.rsaPublicEncrypt(publicKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 公钥解密',
                value: 'eo.rsaPublicDecrypt(publicKey,data,[inputEncoding])'
              },
              {
                label: 'RSA 私钥加密',
                value: 'eo.rsaPrivateEncrypt(privateKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 私钥解密',
                value: 'eo.rsaPrivateDecrypt(privateKey,data,[inputEncoding])'
              },
              {
                label: 'AES 加密',
                value: 'eo.aesEncrypt(data,password,[options])'
              },
              {
                label: 'AES 解密',
                value: 'eo.aesDecrypt(data,password,[options])'
              },
              {
                label: 'DES 加密',
                value: 'eo.desEncrypt(data,password,[options])'
              },
              {
                label: 'DES 解密',
                value: 'eo.desDecrypt(data,password,[options])'
              }
            ]
          }
        ],
        requestPreteratmentBodyLeftData: [
          {
            name: 'API信息',
            items: [
              {
                label: '请求地址（url）',
                value: 'url'
              },
              {
                label: '请求头部（headers）',
                value: 'headers[""]'
              },
              {
                label: '请求参数（params）',
                value: 'params[""]'
              },
              {
                label: '源数据（raw）',
                value: 'raw'
              },
              {
                label: 'Query 请求参数（query）',
                value: 'query[""]'
              }
            ]
          },
          {
            name: '项目环境',
            items: [
              {
                label: 'Host 地址前缀（env.baseUrl）',
                value: 'env.baseUrl'
              },
              {
                label: '额外请求头部（env.headers）',
                value: 'env.headers[""]'
              },
              {
                label: '额外表单请求参数（env.extraParams）',
                value: 'env.extraParams[""]'
              },
              {
                label: '额外 Query 请求参数（env.querys）',
                value: 'env.querys[""]'
              },
              {
                label: '全局变量（env.globalParams）',
                value: 'env.globalParams[""]'
              }
            ]
          },
          {
            name: '公共资源',
            items: [
              {
                label: '插入自定义通用函数',
                value: ''
              }
            ]
          },
          {
            name: '加密 / 解密',
            items: [
              {
                label: 'MD5',
                value: 'eo.md5(data)'
              },
              {
                label: 'SHA1 加密',
                value: 'eo.sha1(data)'
              },
              {
                label: 'SHA256 加密',
                value: 'eo.sha256(data)'
              },
              {
                label: 'RSA-SHA1 签名',
                value: 'eo.rsaSHA1(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA-SHA256 签名',
                value: 'eo.rsaSHA256(data,privateKey,[outputEncoding])'
              },
              {
                label: 'RSA 公钥加密',
                value: 'eo.rsaPublicEncrypt(publicKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 公钥解密',
                value: 'eo.rsaPublicDecrypt(publicKey,data,[inputEncoding])'
              },
              {
                label: 'RSA 私钥加密',
                value: 'eo.rsaPrivateEncrypt(privateKey,data,[outputEncoding])'
              },
              {
                label: 'RSA 私钥解密',
                value: 'eo.rsaPrivateDecrypt(privateKey,data,[inputEncoding])'
              },
              {
                label: 'AES 加密',
                value: 'eo.aesEncrypt(data,password,[options])'
              },
              {
                label: 'AES 解密',
                value: 'eo.aesDecrypt(data,password,[options])'
              },
              {
                label: 'DES 加密',
                value: 'eo.desEncrypt(data,password,[options])'
              },
              {
                label: 'DES 解密',
                value: 'eo.desDecrypt(data,password,[options])'
              }
            ]
          }
        ],
        activeNameBodyLeft: '1',
        preteratmentRadio: 0,
        textareaBinary: '',
        basicAuth: {
          userNameAuthor: '',
          passwordAuthor: ''
        },
        userNameAuthor: '',
        passwordAuthor: '',
        activeName: '1',
        AuthorityVerification: '无',
        selectVal: '0',
        dataArr: this.form,
        activeNames: [],
        requestHeaderNum: 0,
        requestorRadio: 'FormData',
        optionsJsonVal: '',
        optionsAuthorization: [
          {
            value: '0',
            label: '无'
          },
          {
            value: '1',
            label: 'Basic Auth'
          },
          {
            value: '2',
            label: 'JWT'
          }
        ],
        optionsJson: [
          {
            value: 'Object',
            label: 'Object'
          },
          {
            value: 'Array',
            label: 'Array'
          }
        ],
        optionsPosition: [
          {
            value: '0',
            label: 'Query'
          },
          {
            value: '1',
            label: 'Header'
          }
        ],
        jewData: {
          jwtHeaderData: [
            {
              typ: 'JWT',
              alg: ''
            }
          ],
          jwtPayloadData: [
            {
              data: ''
            }
          ],
          jwtSignatureData: [
            {
              secretSalt: ''
            }
          ],
          jwtTokenPositionData: [
            {
              position: '',
              tokenName: ''
            }
          ],
          checkedJwtBearerToken: ''
        },
        optionsJwtHeader: [
          {
            value: '0',
            label: 'HS384'
          },
          {
            value: '1',
            label: 'HS385'
          },
          {
            value: '2',
            label: 'HS386'
          },
          {
            value: '3',
            label: 'HS387'
          },
          {
            value: '4',
            label: 'HS388'
          }
        ],
        requestBodyTableREST: [
          {
            name: '', // 名称
            type: '', // 类型
            required: '', // 是否必填（0否，1是）
            verification: '', // 限制
            remarks: '', // 说明
            demo: '', // 示例
            minLength: '', // 最小长度
            maxLength: '', // 最大长度
            defaultValue: '', // 默认值
            addRow: true
          }
        ],
        requestBodyTableQuery: [
          {
            name: '', // 名称
            type: '', // 类型
            required: '', // 是否必填（0否，1是）
            verification: '', // 限制
            remarks: '', // 说明
            demo: '', // 示例
            minLength: '', // 最小长度
            maxLength: '', // 最大长度
            defaultValue: '', // 默认值
            addRow: true
          }
        ],
        reqParamRawTypeData: ''
      }
    },
    created() {
      this.requestBodyTableFormData = [
        {
          id: this.generateMixedReq(32),
          parentId: null,
          parameterName: '',
          type: '',
          required: true,
          example: '',
          explain: '',
          limit: '',
          children: []
        }
      ]
      this.requestBodyTableJson = [
        {
          id: this.generateMixedReq(32),
          parentId: null,
          parameterName: '',
          type: '',
          required: true,
          example: '',
          explain: '',
          limit: '',
          children: []
        }
      ]
      this.requestBodyTableXML = [
        {
          id: this.generateMixedReq(32),
          parentId: null,
          parameterName: '',
          type: '',
          required: true,
          example: '',
          explain: '',
          limit: '',
          children: []
        }
      ]
    },
    methods: {
      generateMixedReq(n) {
        var res = ''
        const _this = this
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35)
          res += _this.charsReq[id]
        }
        return res
      },
      insertStructure() {
        this.dataStructuretype = this.requestorRadio
        console.log(this.requestBodyTableFormData,1111)
      },
      StructureID(row) {
        console.log(row)
        this.dataStructureIds = row
      },
      getDataAll() {
        this.requestBodyTableFormData = this.$refs.indexTable1.getTableData()
        this.requestBodyTableJson = this.$refs.indexTable2.getTableData()
        this.requestBodyTableXML = this.$refs.indexTable3.getTableData()
      },
      handlerExpand(row) {
        console.log(row)
        row.isExpand = !row.isExpand
      },
      handelClickRowEdit(row, oldRow) {
        if (row.id === oldRow.id) {
          row.editRow = false
          oldRow.editRow = false
        } else {
          row.editRow = true
          oldRow.editRow = false
        }
      },
      seletiontable(row, index) {
        if (this.datatype == 'FormData') {
          if (row.type == 'FormData') {
            return true
          } else {
            return false
          }
        } else if (this.datatype == 'JSON') {
          if (row.type == 'FormData') {
            return false
          } else {
            return true
          }
        } else {
          return false
        }
      },
      onSelectAll() {
        this.$refs.multipleTable.clearSelection()
      },
      selectItem(rows) {
        if (rows.length > 1) {
          var newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.multipleTable.toggleRowSelection(it, true)// 这行可以不要
              Editdatastructure(it.id).then(res => {
                this.datastructure = res.data.data.content
                this.datastruct = res.data.data
              })
              return true
            } else {
              this.$refs.multipleTable.toggleRowSelection(it, false)
              Editdatastructure(it.id).then(res => {
                this.datastructure = res.data.data.content
                this.datastruct = res.data.data
              })
              return false
            }
          })
          this.selectlist = newRows
        } else {
          this.selectlist = rows
          Editdatastructure(rows[0].id).then(res => {
            this.datastructure = res.data.data.content
            this.datastruct = res.data.data
          })
        }
      },
      onSelectOp(row) {
        // this.$refs.multipleTable.clearSelection();不需要
        if (this.datatype == 'FormData') {
          if (row.type == 'FormData') {
            this.$refs.multipleTable.toggleRowSelection(row, true)// 有这个就够了，因为一旦勾选的内容有变化，那么就会触发selectItem(rows)这个函数
            Editdatastructure(row.id).then(res => {
              this.datastructure = res.data.data.content
            })
          }
        }
        if (this.datatype == 'JSON') {
          if (row.type == 'JSON') {
            this.$refs.multipleTable.toggleRowSelection(row, true)// 有这个就够了，因为一旦勾选的内容有变化，那么就会触发selectItem(rows)这个函数
            Editdatastructure(row.id).then(res => {
              this.datastructure = res.data.data.content
              this.datastruct = res.data.data
            })
          }
        }

      // this.selectlist = [];不需要
      // this.selectlist.push(row);不需要
      },
      hovercell(row, column, cell, event) {
        if (this.datatype == 'FormData') {
          if (row.type == 'FormData') {
            this.datahover = true
          } else {
            this.datahover = false
          }
        }
        if (this.datatype == 'JSON') {
          if (row.type == 'JSON') {
            this.datahover = true
          } else {
            this.datahover = false
          }
        }
      },
      datahoversave() {
        if (this.datatype === 'FormData') {
          const datalist = this.requestBodyTableFormData.pop()
          console.log(datalist)
          this.datastructure.forEach(val => {
            this.requestBodyTableFormData.push(val)
          })
          this.dataStructureIds.push(this.datastruct.id)
          this.dataarrqc(this.dataStructureIds)
          console.log(this.dataStructureIds)
        } else if (this.datatype === 'JSON') {
          const datalist = this.requestBodyTableFormData.pop()
          console.log(datalist)
          this.datastructure.forEach(val => {
            this.requestBodyTableXML.push(val)
          })
        }
        this.dialogVisibleseeView = false
      },
      dataarrqc(arr) {
        const hash = []
        for (var i = 0; i < arr.length; i++) {
          if (hash.indexOf(arr[i]) == -1) {
            hash.push(arr[i])
          }
        }
        // console.log(hash, 1111)
        this.dataStructureIds = hash
        return hash
      },
      getCodeMirrorData() {
        console.log(this.$refs.rawTextareaDom.getCodeData())
        return this.$refs.rawTextareaDom.getCodeData()
      },
      removeItem(val) {
        val.forEach(item => {
          this.$delete(item, 'addRow')
          if (item.required === true) {
            this.$set(val, 'required', 1)
          } else {
            this.$set(val, 'required', 0)
          }
        })
        return val
      },
      ondataStructure(val) {
        // 引用数据结构
        console.log(val)
        this.datatype = ''
        this.datatype = val
        this.templateSelection = ''
        this.dialogVisibleseeView = true
        getdatastructureList(this.datastructureList, 0, '').then(res => {
          this.datatableData = res.data.data.records
        })
      },
      copyDeep(templateData) {
        // templateData 是要复制的数组或对象，这样的数组或者对象就是指向新的地址的
        return JSON.parse(JSON.stringify(templateData))
      },
      requestRadioBody(val) {
      },
      requestSelectBody(val) {
      },
      reqParamTypeCode(val) {
        this.reqParamRawTypeData = val
      },
      collapseHandelClick(val) { // 预处理 - 在编辑器中写入数据
        console.log(val)
        this.textAreaValuePreteratment = val
      },
      closeBtn() {
        this.showCollapse = !this.showCollapse
      },
      selectChangeAuthor(val) {
        console.log(val)
        this.selectVal = val
      },
      burlChangeVal() {
        this.$emit('changeFormFun', this.dataArr)
      },
      handleChange(val) {

      },
      handleClick() {

      },
      removeRow(index, tableDom) {
        switch (tableDom) {
          case 'tableData':
            this.tableData.splice(index, 1)
            break
          case 'requestBodyTableFormData':
            this.requestBodyTableFormData.splice(index, 1)
            break
          case 'requestBodyTableJson':
            this.requestBodyTableJson.splice(index, 1)
            break
          case 'requestBodyTableQuery':
            this.requestBodyTableQuery.splice(index, 1)
            break
          case 'requestBodyTableREST':
            this.requestBodyTableREST.splice(index, 1)
            break
        }
      },
      tableRowDataChange(val, row, tableDom) {
        switch (tableDom) {
          case 'tableData':
            if (row.addRow) {
              row.addRow = false
              this.tableData.push({
                type: 0, // 类型（0请求head，1返回head）
                headerName: '', // 标签
                required: true, // 必填
                headerValue: '', // 示例
                remarks: '', // 说明
                addRow: true
              })
            }
            break
          case 'requestBodyTableFormData':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableFormData.push({
                addRow: true,
                parameterName: '',
                type: '',
                required: true,
                explain: '',
                limit: '',
                example: ''
              })
            }
            break
          case 'requestBodyTableJson':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableJson.push({
                addRow: true,
                parameterName: '',
                type: '',
                required: true,
                explain: '',
                limit: '',
                example: ''
              })
            }
            break
          case 'requestBodyTableQuery':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableQuery.push({
                name: '', // 名称
                type: '', // 类型
                required: '', // 是否必填（0否，1是）
                verification: '', // 限制
                remarks: '', // 说明
                demo: '', // 示例
                minLength: '', // 最小长度
                maxLength: '', // 最大长度
                defaultValue: '', // 默认值
                addRow: true
              })
            }
            break
          case 'requestBodyTableREST':
            if (row.addRow) {
              row.addRow = false
              this.requestBodyTableREST.push({
                name: '', // 名称
                type: '', // 类型
                required: '', // 是否必填（0否，1是）
                verification: '', // 限制
                remarks: '', // 说明
                demo: '', // 示例
                minLength: '', // 最小长度
                maxLength: '', // 最大长度
                defaultValue: '', // 默认值
                addRow: true
              })
            }
            break
        }
      },
      // -------------------------json---------------------------
      removeTableRow(row, index) {
        const newArr = this.filter(this.requestBodyTableJson, row.id)
        this.requestBodyTableJson = newArr
      },
      filter(data, id) {
        const _this = this
        var newData = data.filter(x => x.id !== id)
        newData.forEach(x => x.children && (x.children = _this.filter(x.children, id)))
        return newData
      },
      generateMixed(n) {
        var res = ''
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35)
          res += this.chars[id]
        }
        return res
      },
      dataForEachFun(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.editRowId) {
            val.parameterName = _this.formData.parameterName
            val.type = _this.formData.type
            val.required = _this.formData.required
            val.explain = _this.formData.explain
            val.limit = _this.formData.limit
            val.example = _this.formData.example
          } else if (val.children.length !== 0) {
            _this.dataForEachFun(val.children)
          }
        })
      },
      saveDialogConfig() {
        this.dataForEachFun(this.requestBodyTableJson)
        console.log(this.requestBodyTableJson)
        this.dialogConfig = false
      },
      childrenForEachFun(data) {
        const _this = this
        data.forEach((val, index) => {
          console.log(val.children)
          console.log(val.id)
          if (val.id === _this.childrenId) {
            val.children.push({
              id: _this.generateMixed(30),
              parentId: _this.childrenParentId,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            console.log('有子集')
            _this.childrenForEachFun(val.children)
          }
        })
      },
      configCanshu(row, index, val) {
        this.editRowId = row.id
        this.formData.parameterName = row.parameterName
        this.formData.type = row.type
        this.formData.required = row.required
        this.formData.explain = row.explain
        this.formData.limit = row.limit
        this.formData.example = row.example
        this.dialogConfig = true
      },
      addFieldChildren(row, index) {
        console.log(this.requestBodyTableJson)
        this.childrenId = row.id
        console.log(this.childrenId)
        console.log('--------------------------------------')
        this.childrenParentId = row.id
        this.childrenForEachFun(this.requestBodyTableJson)
        // this.requestBodyTableJson[index].children.push({
        //   id: _this.generateMixed(30),
        //   parentId: row.id,
        //   parameterName: '',
        //   type: '',
        //   required: true,
        //   explain: '',
        //   limit: '',
        //   example: '',
        //   children: []
        // })
      },
      addForEachFun(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.parentIdData) {
            console.log(val)
            val.children.push({
              id: _this.generateMixed(30),
              parentId: _this.parentIdData,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            _this.addForEachFun(val.children)
          }
        })
      },
      addRowData(row, index) {
        const _this = this
        this.parentIdData = row.parentId
        console.log(row)
        if (row.parentId === '****') {
          this.requestBodyTableJson.splice(index, 0, {
            id: _this.generateMixed(30),
            parentId: '****',
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: '',
            children: []
          })
        } else {
          console.log('不是根节点')
          this.addForEachFun(this.requestBodyTableJson)
        }
      },
      // -------------------------xml---------------------------
      removeTableRowXML(row, index) {
        const newArr = this.filterXML(this.requestBodyTableXML, row.id)
        this.requestBodyTableXML = newArr
      },
      filterXML(data, id) {
        const _this = this
        var newData = data.filter(x => x.id !== id)
        newData.forEach(x => x.children && (x.children = _this.filterXML(x.children, id)))
        return newData
      },
      generateMixedXML(n) {
        var res = ''
        for (var i = 0; i < n; i++) {
          var id = Math.ceil(Math.random() * 35)
          res += this.charsXML[id]
        }
        return res
      },
      dataForEachFunXML(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.editRowIdXML) {
            val.parameterName = _this.formDataXML.parameterName
            val.type = _this.formDataXML.type
            val.required = _this.formDataXML.required
            val.explain = _this.formDataXML.explain
            val.limit = _this.formDataXML.limit
            val.example = _this.formDataXML.example
          } else if (val.children.length !== 0) {
            _this.dataForEachFunXML(val.children)
          }
        })
      },
      saveDialogConfigXML() {
        this.dataForEachFunXML(this.requestBodyTableXML)
        console.log(this.requestBodyTableXML)
        this.dialogConfigXML = false
      },
      childrenForEachFunXML(data) {
        const _this = this
        data.forEach((val, index) => {
          console.log(val.children)
          console.log(val.id)
          if (val.id === _this.childrenIdXML) {
            val.children.push({
              id: _this.generateMixedXML(30),
              parentId: _this.childrenParentIdXML,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            console.log('有子集')
            _this.childrenForEachFunXML(val.children)
          }
        })
      },
      configCanshuXML(row, index, val) {
        this.editRowIdXML = row.id
        this.formDataXML.parameterName = row.parameterName
        this.formDataXML.type = row.type
        this.formDataXML.required = row.required
        this.formDataXML.explain = row.explain
        this.formDataXML.limit = row.limit
        this.formDataXML.example = row.example
        this.dialogConfigXML = true
      },
      addFieldChildrenXML(row, index) {
        console.log(this.requestBodyTableXML)
        this.childrenIdXML = row.id
        console.log(this.childrenIdXML)
        console.log('--------------------------------------')
        this.childrenParentIdXML = row.id
        this.childrenForEachFunXML(this.requestBodyTableXML)
        // this.requestBodyTableXML[index].children.push({
        //   id: _this.generateMixedXML(30),
        //   parentId: row.id,
        //   parameterName: '',
        //   type: '',
        //   required: true,
        //   explain: '',
        //   limit: '',
        //   example: '',
        //   children: []
        // })
      },
      addForEachFunXML(data) {
        const _this = this
        data.forEach((val, index) => {
          if (val.id === _this.parentIdDataXML) {
            console.log(val)
            val.children.push({
              id: _this.generateMixedXML(30),
              parentId: _this.parentIdDataXML,
              parameterName: '',
              type: '',
              required: true,
              explain: '',
              limit: '',
              example: '',
              children: []
            })
          } else if (val.children.length !== 0) {
            _this.addForEachFunXML(val.children)
          }
        })
      },
      addRowDataXML(row, index) {
        const _this = this
        this.parentIdDataXML = row.parentId
        console.log(row)
        if (row.parentId === '****') {
          this.requestBodyTableXML.splice(index, 0, {
            id: _this.generateMixedXML(30),
            parentId: '****',
            parameterName: '',
            type: '',
            required: true,
            explain: '',
            limit: '',
            example: '',
            children: []
          })
        } else {
          console.log('不是根节点')
          this.addForEachFunXML(this.requestBodyTableXML)
        }
      }
    }
  }
</script>

<style>
.popover el-popover{
  background-color: #000000;
}
</style>
